<template>
    <div :style="carStyle" @click="submitFormHandle">{{ obj.title }}
        <el-dialog title="提交" :visible.sync="dialogVisible" append-to-body width="500px">
            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"
                size="mini">
                <el-form-item v-for="domain in dynamicValidateForm.domains" :label="domain.name" :key="domain.id"
                    :prop="domain.name">
                    <el-input v-model="domain.value" v-if="domain.attribute == 1 || domain.attribute == 0"></el-input>
                    <template v-if="domain.attribute == 3">
                        <div class="uploadbtn">
                            <el-upload v-if="domain.attributeValue == 0" :action="uploadUrl"
                                :on-success="(res, file) => { uploadHandleChange(res, file, domain, 0) }"
                                :show-file-list="false" :data="{ CustomerId: $store.getters.firmId }"
                                accept=".jpg, .png, .gif" :before-upload="uploadBefore">
                                <el-button v-if="domain.attributeValue == 0">上传图片</el-button>
                            </el-upload>
                            <el-upload v-if="domain.attributeValue == 1" :action="uploadUrl"
                                :on-success="(res, file) => { uploadHandleChange(res, file, domain, 1) }"
                                :show-file-list="false" :data="{ CustomerId: $store.getters.firmId }" accept=".mp4"
                                :before-upload="uploadBefore">
                                <el-button v-if="domain.attributeValue == 1">上传视频</el-button>
                            </el-upload>
                            <el-upload v-if="domain.attributeValue == 2" :action="uploadUrl2"
                                :on-success="(res, file) => { uploadHandleChange(res, file, domain, 2) }"
                                :show-file-list="false" :data="{ CustomerId: $store.getters.firmId }" accept=".pdf"
                                :before-upload="uploadBefore">
                                <el-button v-if="domain.attributeValue == 2">上传文件</el-button>
                            </el-upload>
                        </div>
                        <p class="uploadurl">{{ jsonDataReturn(domain.value) }}</p>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import { GetWriteColumnList, Write, BoardWrite } from "@/api/dataTable";

export default {
    Name: "Submit",
    props: {
        obj: Object,
        discount: Number,
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            dialogVisible: false,
            carStyle: {},
            dynamicValidateForm: {
                domains: [],
            },
            uploadUrl: process.env.VUE_APP_UPLOAD_NEWAPI,
            uploadUrl2: process.env.VUE_APP_UPLOAD_API,
        }
    },
    mounted() {
        this.setStyle();


    },
    methods: {
        // 获取表格列数据
        getColomList() {

            GetWriteColumnList({ id: this.obj.tableData.tableId }).then((res) => {
                var mycolumnData = res.data.data.data;

                var formData = [];
                mycolumnData.forEach(item => {
                    this.obj.tableData.checkedColums.forEach(i => {
                        if (item.id == i) {
                            formData.push({ id: item.id, name: item.name, value: '', attribute: item.attribute, attributeValue: item.attributeValue })
                        }
                    })
                })
                this.dynamicValidateForm.domains = formData;
            });
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                cursor: 'pointer',
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion
        },
        submitFormHandle() {
            if (!this.isEdit) {
                if (this.obj.tableData.tableId) {
                    this.dialogVisible = true;
                    this.getColomList();
                } else {
                    this.$message.error("参数设置不完整");
                }
            }
        },
        submitForm() {
            if (!this.isEdit) {
                var columnIds = [];
                var values = [];
                this.dynamicValidateForm.domains.forEach(e => {
                    columnIds.push(e.id)
                    values.push(e.value)
                });
                var writeType = 0;
                if (this.obj.tableData.reloadType == 1) {
                    writeType = 1;
                }

                BoardWrite({ id: this.obj.tableData.tableId, columnIds, values, writeType }).then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "提交成功",
                            type: "success",
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
                // Write({ id: this.obj.tableData.tableId, columnIds, values }).then((res) => {
                //     if (res.data.code == 0) {
                //         this.$message({
                //             message: "提交成功",
                //             type: "success",
                //         });
                //     } else {
                //         this.$message.error(res.data.msg);
                //     }
                // });

                this.dialogVisible = false;
            }
        },
        jsonDataReturn(jsonData) {
            if (jsonData) {
                var data = JSON.parse(jsonData);
                return data.name;
            }
            return "";
        },
        // 上传相关
        uploadBefore(file) {
            if (file.size > 1000 * 1000 * 30) {
                this.$message.error("上传文件不能大于30M");
                return false;
            }

            this.$loading();
        },
        uploadError() {
            this.$loading().close();
        },
        uploadHandleChange(res, file, item, type) {
            this.$loading().close();
            if (res.code == 0) {
                var data = {
                    id: "",
                    url: res.data,
                    name: file.name,
                    type: type
                }
                this.$set(item, 'filePath', file.name);
                item.value = JSON.stringify(data);
            } else {
                this.$message.error(res.message); 
            }
        },
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
            }
        }
    },
}
</script>

<style scoped>
.uploadbtn {
    display: inline-block;
}

.uploadurl {
    display: inline-block;
    line-height: 25px;
    padding-left: 10px;
    width: 251px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    text-overflow: ellipsis;
}
</style>